import React, {Component} from 'react'
import BackPressComponent from '../common/BackPressComponent'
import {connect} from 'react-redux'
import actions from '../action/'
import {
    View,
    Text,
    StyleSheet,
    Button,
    TouchableOpacity,
    WebView,
} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import NavigationBar from "../common/NavigationBar";
import navigatorUtil from "../navigator/navigatorUtil"
import {BackHandler} from 'react-native'
import FavoriteDao from "../expand/dao/FavoriteDao";
import FavoriteUtil from "../util/FavoriteUtil";


const THEME_COLOR = '#678'
const TRENDING_URL = 'https://github.com/'

class WebViewPage extends Component {
    constructor(props) {
        super(props)
        this.params = this.props.navigation.state.params
        const {title, url} = this.params
        this.state = {
            title: title,
            url: url,
            canGoBack: false,
        }
    }

    onBackPress = () => {
        this.onBack()
        return true
    }

    onBack = () => {
        if (this.state.canGoBack) {
            this.webView.goBack()
        } else {
            navigatorUtil.goBack(this.props)
        }
    }

    onFavoriteIconPress() {
        const {callback} = this.params
        const {projectModel, isFavorite} = this.state
        callback(!isFavorite)
        FavoriteUtil.onFavorite(this.favoriteDao, projectModel.item, !isFavorite, this.flag)
        this.setState({
            isFavorite: !this.state.isFavorite
        })
    }


    getLeftButton() {
        return (
            <View style={{flexDirection: 'row'}}>
                <TouchableOpacity onPress={() => {
                    this.onBack()
                }}>
                    <View style={{padding: 8, marginLeft: 12}}>
                        <Ionicons
                            name={'ios-arrow-back'}
                            size={26}
                            style={{color: 'white'}}
                        />
                    </View>
                </TouchableOpacity>
            </View>
        )
    }

    onNavigationStateChange(navState) {
        this.setState({
            canGoBack: navState.canGoBack,
            url: navState.url,
        })
    }

    render() {
        const titleLayoutStyle = this.state.title.length > 20 ? {paddingRight: 30} : null
        let navigationBar =
            <NavigationBar
                title={this.state.title}
                style={{backgroundColor: THEME_COLOR}}
                leftButton={this.getLeftButton()}
            />
        return <View style={styles.welcome}>
            {navigationBar}
            <WebView
                ref={webView => this.webView = webView}
                originWhitelist={['*']}
                startInLoadingState={true}
                source={{uri: this.state.url}}
                onNavigationStateChange={navState => this.onNavigationStateChange(navState)}
            />
        </View>
    }

    componentDidMount() {
        // if (this.props.backPress) {
        //     BackHandler.addEventListener('hardwareBackPress', this._hardwareBackPress)
        // }
        BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
    }

    componentWillUnmount() {
        // if (this.props.backPress) {
        //     BackHandler.removeEventListener('hardwareBackPress', this._hardwareBackPress)
        // }
        BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
    }

}

const styles = StyleSheet.create({
    welcome: {
        flex: 1,
        // alignItems: 'center',
        // justifyContent: 'center',
    }
})
const mapState = state => ({})
const mapDispatch = dispatch => ({
    onThemeChange: theme => dispatch(actions.onThemeChange(theme))
})
export default connect(mapState, mapDispatch)(WebViewPage)
